<template>
  <main>
    <div class="base">
      <el-divider style="width: 95%;" content-position="left"><h3>基本信息</h3></el-divider>
      <el-button style="height: 30px;border-radius: 30%" size="mini" >编辑</el-button>
    </div>
   <div id="baseMsg">
      <div class="options">
        <p>登录名</p>
        <p>学校层次</p>
        <p>所在地</p>
        <p>注册时间</p>
      </div>
     <div class="msg">
       <p>{{myArchives.name}}</p>
       <p>{{myArchives.level}}</p>
       <p>{{myArchives.address}}</p>
       <p>{{myArchives.legalTime}}</p>
     </div>

   </div>
    <div class="contact">
      <el-divider style="width: 95%;" content-position="left"><h3>联系信息</h3></el-divider>
    </div>
    <div id="contactMsg">
      <div class="options">
        <p>邮箱</p>
        <p>手机</p>
      </div>
      <div class="msg">
        <p>{{myArchives.email}}</p>
        <p>{{myArchives.tel}}</p>
      </div>

    </div>
  </main>

</template>

<script>
export default {
name: "archives",
  data() {
    return {
      formInline: {
        user: '',
        region: ''
      },
      myArchives:{
        name:'中山大学',
        level:'本科',
        address:'广东中山',
        legalTime:'2020/6/18',
        email:'1203207252@qq.com',
        tel:'15367112345'
      }
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!');
    }
  }

}
</script>

<style scoped>
main{
  width: 70%;
  box-sizing: border-box;
  padding: 2% 10%;
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: #fff;
  border-bottom: 1px solid grey;
}
.base{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.contact{
  width: 100%;
}
#baseMsg{
  width: 90%;
  height: 220px;
  font-size: 15px;
  color: rgb(128,128,128);
  display: flex;
  justify-content: space-between;
}
#contactMsg{
  width: 90%;
  height: 220px;
  font-size: 15px;
  color: rgb(128,128,128);
  display: flex;
  justify-content: space-between;
}
.options{
  width: 11%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.msg{
  color: black;
 width: 85%;
  display: flex;
  flex-direction: column;
}

</style>
